<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTG-8">
    <title>OnlineMall | Index</title>
    <link rel="stylesheet" th:href="@{/css/qingzhu0.css}">
    <link rel="stylesheet" th:href="@{/css/images.css}">
    <link rel="stylesheet" th:href="@{/css/qingzhu1.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/qingzhu2.css}">
    <link rel="stylesheet" th:href="@{/css/qingzhu3.css}">
    <link rel="stylesheet" th:href="@{/css/qingzhu4.css}">
    <link rel="stylesheet" th:href="@{/css/qingzhu5.css}">
    <link rel="stylesheet" th:href="@{/css/qingzhu6.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<body>
<div th:replace="common::header"></div>
    <div class="outer0">
        <ul class="imgList">
        </ul>
        <div class="focusList">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="outer1">
        <a href="/mall/product/" class="a1">新品推荐，欢迎选购</a>
        <a href="/mall/product/" class="a2"><span >家居必备实用小单品</span></a>
        <div class="inter1">
            <a href="javascript:void(0)" class="zuo"><i class="icon iconfont icon-pc-zuo"></i></a>
            <a href="javascript:void(0)" class="you"><i class="icon iconfont icon-pc-you"></i></a>
            <div class="bbb">
                <ul class="newul">
                </ul>
            </div>
        </div>
    </div>
    <div class="outer2">
        <p class="outer2_p1"><a href="/mall/product/">专题活动，限时促销</a></p>
        <div class="inter2">
            <p>严选材质，用心设计，精致家居生活</p>
        </div>
        <div class="inter3" id="promot">

        </div>
    </div>
    <div class="box">
        <p class="p1"><a href="/mall/product/">青竹良品，你的家居首选</a></p>
        <div class="box1">
            <p>天然之源，诚挚之礼，严格质检</p>
        </div>
        <div class="box2">
            <ul>
                <div class="end">
                </div>
            </ul>
        </div>
    </div>

    <div class="outer3">
        <p class="p1"><a href="/mall/product/">全球大牌优选，买手精心挑选</a></p>
        <div class="inter1">
            <p>全球好货 原装正品 海外直邮 自有保税仓</p>
        </div>
        <div class="inter2" id="select">

        </div>
        <div class="inter3">
            <ul>
                <li>
                    <a href=""class="a1"><img src="image/pic8.png" alt=""></a>
                    <a href=""><p>自然生活，精选用料</p></a>
                </li>
                <li>
                    <a href=""class="a1"><img src="image/pic9.png" alt=""></a>
                    <a href=""><p>源点生活</p></a>
                </li>
                <li>
                    <a href=""class="a1"><img src="image/pic10.png" alt=""></a>
                    <a href=""><p>puree好设计好生活</p></a>
                </li>
                <li>
                    <a href=""class="a1"><img src="image/pic11.png" alt=""></a>
                    <a href=""><p>家居精品之选</p></a>
                </li>
                <li class="last">
                    <a href=""class="a1"><img src="image/pic12.png" alt=""></a>
                    <a href=""><p>木香，手工制作</p></a>
                </li>
            </ul>
        </div>
    </div>
<div th:replace="common::footer"></div>
    <script th:src="@{/js/青竹1.js}"></script>
    <script th:src="@{/js/jqurey.js}"></script>
    <script th:src="@{/js/图片.js}"></script>
    <script th:src="@{/js/shop.js}"></script>
</body>
<script>
    $(function () {
        getData1()
        getData2()
    })
    function getData1(){
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/mall/product/init.do",
            //请求成功
            success : function(result) {
                console.log("已经接受了首页商品的数据",result)
                putDatahot(result.data.hot)
                putDatanew(result.data.new)
                putDatapromot(result.data.promot)
                putDataselect(result.data.select)
                putDatalunbo(result.data.lunbo)
            }
        });
    }
    function putDatalunbo(data) {
        var lunbo=$(".imgList")
        var i=1
        for(item of data){
            if(i==1){
                var lun=$('<li style="z-index:1;"><a  href="/mall/product/get.html?id='+item.id+'"><img src="image/'+item.mainImage+'" alt=""></a></li>')
                i=0
                lunbo.append(lun)
            }else{
                var lun=$('<li><a  href="/mall/product/get.html?id='+item.id+'"><img src="image/'+item.mainImage+'" alt=""></a></li>')
                lunbo.append(lun)
            }
        }
    }
    function putDatanew(data) {
        var newul=$(".newul")
        for(item of data){
            var li=$("<li></li>")
            var img=$("<a href='/mall/product/get.html?id="+item.id+"'><img src='image/"+item.mainImage+"' alt=''></a>")
            var name=$("<a href=''><p class='p11'>"+item.name+"</p></a>")
            var price=$("<p class='p22'>¥"+item.price+"</p>")
            li.append(img)
            li.append(name)
            li.append(price)
            newul.append(li)
        }
    }
    function putDatahot(data) {
        var hot=$(".end")
        for(item of data){
            var li=$("<li></li>")
            var img=$("<a href='/mall/product/get.html?id="+item.id+"'><img src='image/"+item.mainImage+"' alt=''></a>")
            var name=$("<a href=''><p class='p11'>"+item.name+"</p></a>")
            var price=$("<p class='p22'>¥"+item.price+"</p>")
            var detail=$("<a href='' class='a11'><div class='d11'>查看详情</div></a>")
            li.append(img)
            li.append(name)
            li.append(price)
            li.append(detail)
            hot.append(li)
        }

    }
    // 获得活动信息
    function getData2(){
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/mall/activity/column.do",
            //请求成功
            success : function(result) {
                console.log("已经接受了活动的数据",result)
            }
        });
    }
    // 限时促销
    function putDatapromot(data) {
        var promot=$("#promot")
        var left=$("<div class='left'><a href='/mall/product/get.html?id="+data[0].id+"'><img src='image/"+data[0].mainImage+"' alt='' width='680px' height='480px'></a><span class='border1'></span></div>")
        var right1=$("<div class='right1'><a href='/mall/product/get.html?id="+data[1].id+"'><img src='image/"+data[1].mainImage+"' alt='' width='450px' height='180px'></a><span class='border2'></span></div>")
        var right2=$("<div class='right2'><a href='/mall/product/get.html?id="+data[2].id+"'><img src='image/"+data[2].mainImage+"' alt='' width='450px' height='180px'></a><span class='border3'></span></div>")
        promot.append(left)
        promot.append(right1)
        promot.append(right2)
    }
    function putDataselect(data){
        var select=$("#select")
        var left=$("<div class='left'><a href='/mall/product/get.html?id="+data[0].id+"'><img src='image/"+data[0].mainImage+"' alt='' width='504px' height='358px'></a><span class='border1'></span></div>")
        var mid=$("<div class='mid'></div>")
        var mid1=$("<div class='mid1'><a href='/mall/product/get.html?id="+data[1].id+"'><img src='image/"+data[1].mainImage+"' alt='' width='411px' height='172px'></a><span class='border2'></span></div>")
        var mid2=$("<div class='mid2'><a href='/mall/product/get.html?id="+data[2].id+"'><img src='image/"+data[2].mainImage+"' alt='' width='411px' height='172px'></a><span class='border3'></span></div>")
        var right=$("<div class='right'><a href='/mall/product/get.html?id="+data[3].id+"'><img src='image/"+data[3].mainImage+"' alt='' width='197px' height='358px'></a><span class='border4'></span></div>")
        select.append(left)
        mid.append(mid1)
        mid.append(mid2)
        select.append(mid)
        select.append(right)
    }
</script>
</html>